<template>
  <v-row :dense="$vuetify.breakpoint.smAndDown">
    <v-col cols="12">
<!--      <ToolheadCard class="mb-2 mb-sm-4" v-if="!printerPrinting"></ToolheadCard>-->
<!--      <TemperatureCard class="mb-2 mb-sm-4" v-if="!printerPrinting"></TemperatureCard>-->
      <OutputsCard class="mb-2 mb-sm-4"></OutputsCard>
      <MacrosCard></MacrosCard>
    </v-col>
  </v-row>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import StateMixin from '@/mixins/state'
// import draggable from 'vuedraggable'

import ToolheadCard from '@/components/widgets/toolhead/ToolheadCard.vue'
import MacrosCard from '@/components/widgets/macros/MacrosCard.vue'
import PrinterLimitsCard from '@/components/widgets/limits/PrinterLimitsCard.vue'
import RetractCard from '@/components/widgets/retract/RetractCard.vue'
import OutputsCard from '@/components/widgets/outputs/OutputsCard.vue'
import TemperatureCard from '@/components/widgets/thermals/TemperatureCard.vue'

@Component({
  components: {
    TemperatureCard,
    OutputsCard,
    RetractCard,
    PrinterLimitsCard,
    MacrosCard,
    ToolheadCard
  }
})
export default class Tools extends Mixins(StateMixin) {
}
</script>

<style lang="scss" scoped>
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #ccc;
}

.list-group {
  flex: 1 1 auto;

  span {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 50vh;
  }
}

@media #{map-get($display-breakpoints, 'sm-and-down')} {
  .list-group span {
    min-height: auto;
  }
}

.drag {
  .list-group {
    padding: 6px;
    border: thin dashed rgba(map-get($shades, 'white'), 0.12);
  }
}

</style>
